import './App.css';

//rcc 生成类组件
//rsf 生成函数式组件

import React, { Component, lazy, Suspense } from 'react';

import { Redirect, Route, Switch } from 'react-router-dom';

// 懒加载
const Index = lazy(() => import('./views/Index'))
const QuanGong = lazy(() => import('./views/QuanGong'))
const QuanShou = lazy(() => import('./views/QuanShou'))
const Search = lazy(() => import('./views/Search'))
const Search_xiang = lazy(() => import('./views/Search_xiang'))
const Yonghu_xiang = lazy(() => import('./views/Yonghu_xiang'))
const Xingcheng = lazy(() => import('./views/Xingcheng'))
const Jingxuan = lazy(() => import('./views/Jingxuan'))
const Shanping = lazy(() => import('./views/Shanping'))
const Xieyi = lazy(() => import('./views/Xieyi'))
const Login = lazy(() => import('./views/Login'))

const NotFound = lazy(() => import('./views/NotFound'))


class App extends Component {
  render() {

    return (
      <div className='app'>
        {/* 路由组件 */}

        <Suspense fallback={'加载中...'}>
          {/*this.props.children用来保存父组件在渲染子组件是通过子组件内容区传入的数据/组件*/}
          {/* {this.props.children} */}
          {/* Switch默认匹配当前项，刷新不会重定向 */}
          <Switch>
            <Route path="/index" component={Index} />
            <Route path="/quanbugonglue" component={QuanGong} />
            <Route path="/quanbushouji" component={QuanShou} />
            <Route path="/search" component={Search} />
            <Route path="/search_xiang" component={Search_xiang} />
            <Route path="/yonghu_xiang" component={Yonghu_xiang} />
            <Route path="/xingcheng" component={Xingcheng} />
            <Route path="/jingxuan" component={Jingxuan} />
            <Route path="/shanping" component={Shanping} />
            <Route path="/xieyi" component={Xieyi} />
            <Route path="/login" component={Login} />



            {/* 路由重定向 exact精准匹配 */}
            <Redirect from='/' to="shanping" exact />

            {/* 404 */}
            <Route path="*" component={NotFound} />
          </Switch>
        </Suspense>

      </div>
    );
  }
}

export default App;